<template>
    <el-form-item label="计划名称" prop="name" :rules="createRules.checkPlan">
        <el-popover placement="bottom" width="624" trigger="click">
            <div class="flexbox flexcenter flexbetween">
                <div class="flexbox">
                    <span>插入动态词包：</span>
                    <div class="flex flexbox" style="flex-wrap: wrap;">
                        <div v-for="(item,index) in planKeyWord" :key="index">
                            <el-link v-if="hideCreatTitle(item)" :underline="false" class="ml_12" type="primary" :disabled="getPlanNameStatus(item)" @click="addPlanKeyWord(item)">+{{item.name}}</el-link>
                        </div>
                    </div>
                </div>
            </div>
            <el-input slot="reference" v-model="createform.name" clearable placeholder="请输入计划名称，1-50个字符" size="small" style="width:650px" @change="sessionSave"></el-input>
        </el-popover>
        <div class="flexbox" style="margin-top:5px">
            <span class="font_14 color_02">预览示例：{{getPlanNameExple()}}</span>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props:["createform","createRules","planKeyWord"],
    name: "",
    data() {
        return {};
    },
    created() {},
    methods: {
        //自定义下隐藏标题组名称
        hideCreatTitle(item) {
            let is_show = null;
            if (
                item.name == "标题组包名" &&
                this.createform.creative_material_mode == "CUSTOM_CREATIVE"
            ) {
                is_show = false;
            } else {
                is_show = true;
            }
            return is_show;
        },

        // 计划名称状态
        getPlanNameStatus(item) {
            let name = this.createform.name;
            let ref2 = /\{(.+?)\}/g;
            let str = name.match(ref2);
            let is_true = false;
            for (let i in str) {
                if (str[i] == item.key) {
                    is_true = true;
                    break;
                }
            }
            return is_true;
        },

        // 添加计划名称词包
        addPlanKeyWord(item) {
            this.createform.name += item.key + "_";
            this.sessionSave();
        },

        //计划名称示例
        getPlanNameExple() {
            let name = this.createform.name;
            for (let i in this.planKeyWord) {
                name = name.replace(
                    this.planKeyWord[i].key,
                    this.planKeyWord[i].default_name
                );
            }
            return name;
        },

        sessionSave(){
            this.$emit("sessionSave")
        }
    },
    components: {},
};
</script>


<style scoped>
</style>

